<template>
  <div>
    <scroll-view
      scroll-x
      class="bg-white nav"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view
        class="cu-item"
        :class="index == TabCur ? 'text-green cur' : ''"
        v-for="(item, index) in tabItem"
        :key="index"
        @tap="tabSelect"
        :data-id="index"
      >
        <span :style="index == TabCur ? 'color: #000;' : 'color: #5a5a5a;'">{{
          item.title
        }}</span>
      </view>
    </scroll-view>

    <!-- 基础信息 -->
    <div class="inforBox marginBottom15" v-if="TabCur == 0">
      <BaseTitle :title="'基础信息'" :titleRed="true"></BaseTitle>
      <div class="BaseHouseMessage">
        <div v-for="(v, i) in base" :key="i">
          <BaseHouseMessage
            :title="v.name"
            :content="v.msg"
            :isBlock="true"
          ></BaseHouseMessage>
        </div>
      </div>
    </div>

    <!-- 销售信息 -->
    <div class="inforBox marginBottom15" v-if="TabCur == 1">
      <BaseTitle :title="'销售信息'" :titleRed="true"></BaseTitle>
      <div class="BaseHouseMessage">
        <div v-for="(v, i) in base" :key="i">
          <BaseHouseMessage
            :title="v.name"
            :content="v.msg"
            :isBlock="true"
          ></BaseHouseMessage>
        </div>
      </div>
    </div>

    <!-- 小区概括 -->
    <div class="inforBox marginBottom15" v-if="TabCur == 2">
      <BaseTitle :title="'小区概括'" :titleRed="true"></BaseTitle>
      <div class="BaseHouseMessage">
        <div v-for="(v, i) in base" :key="i">
          <BaseHouseMessage
            :title="v.name"
            :content="v.msg"
            :isBlock="true"
          ></BaseHouseMessage>
        </div>
      </div>
    </div>
<!-- {{mainActiveIndex}}/{{activeId}}
    <van-tree-select
      items="{{items}}"
      height="55vw"
      :main-active-index="mainActiveIndex"
      :active-id="activeId"
      @click-nav="onClickNav"
      @click-item="onClickItem"
    /> -->
  </div>
</template>

<script>
import BaseTitle from "../../components/BaseTitle/index.vue";
import BaseHouseMessage from "../../components/BaseHouseMessage/index.vue"; //小信息

export default {
  data() {
    return {
      mainActiveIndex: 0,
      activeId: null,
      items: [
        {
          // 导航名称
          text: "所有城市",
          // 导航名称右上角徽标，1.5.0 版本开始支持
          // badge: 3,
          // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持
          // dot: true,
          // 禁用选项
          disabled: false,
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "温州",
              // id，作为匹配选中状态的标识
              id: 1,
            },
            {
              text: "杭州",
              id: 2,
            },
          ],
        },
        {
          // 导航名称
          text: "123",
          // 导航名称右上角徽标，1.5.0 版本开始支持
          // badge: 3,
          // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持
          // dot: true,
          // 禁用选项
          disabled: false,
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "温州2",
              // id，作为匹配选中状态的标识
              id: 1,
            },
            {
              text: "杭州2",
              id: 2,
            },
          ],
        },
      ],

      TabCur: 0,
      scrollLeft: 0,
      tabItem: [
        { title: "基础信息" },
        { title: "销售信息" },
        { title: "小区概括" },
        { title: "预售许可证" },
      ],
      base: [
        { name: "楼盘别名", msg: "黑龙滩长岛" },
        { name: "楼盘特色", msg: "近主干道，购物方便，美食云集，超市" },
        { name: "参考均价", msg: "8200元/平" },
        { name: "参考总价", msg: "66万/套" },
        { name: "物业类型", msg: "住宅" },
        { name: "建筑类型", msg: "塔楼" },
        { name: "装修标准", msg: "精装修" },
        { name: "产权年限", msg: "70年" },
        { name: "品牌", msg: "其他" },
        { name: "开发商", msg: "四川黑龙滩长岛国际旅游度假中心有限公司" },
        { name: "所在区域", msg: "仁寿县" },
        { name: "楼盘地址", msg: "黑龙滩镇四海社区溪湖大道1号" },
      ],
    };
  },
  components: {
    BaseTitle,
    BaseHouseMessage,
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
    },
    onClickNav({ detail = {} }) {
    //   debugger
    // this.setData({
    //   mainActiveIndex: detail.index || 0,
    // });
    this.mainActiveIndex = detail.index || 0
  },

  onClickItem({ detail = {} }) {
    const activeId = this.activeId === detail.id ? null : detail.id;

    // this.setData({ activeId });
    this.activeId = activeId
  },
  },
};
</script>

<style scoped>
.cu-item {
  color: #5e5e5e !important;
}
.text-green {
  color: #dd282e !important;
  font-size: 30rpx;
  font-weight: bold;
}

.inforBox {
  background: #fff;
}
.BaseHouseMessage {
  padding: 10rpx 30rpx;
  box-sizing: border-box;
}
</style>